<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 标题：</p>
        <el-input v-model="queryParams.title" placeholder="请输入标题"></el-input>
      </el-col>

      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="4">
        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData"  border style="margin-top: 30px">
      <el-table-column prop="title" min-width="200" label="新闻标题"></el-table-column>
      <el-table-column prop="title" min-width="200" label="新闻封面">
        <template slot-scope="scope">
          <el-image :src="scope.row.cover" style="height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="logo" min-width="200"  label="新闻类型">
        <template slot-scope="scope">
          {{status(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column prop="logo" min-width="200"  label="状态">
        <template slot-scope="scope">
          {{statusType(scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="body" min-width="200"  :show-overflow-tooltip="true" label="新闻内容 "></el-table-column>
      <el-table-column min-width="150"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="360" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateShop(scope.row)">修改</el-button>
          <el-button type="primary" size="mini" icon="el-icon-view" @click="viewShop(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteMessages(scope.row)" icon="el-icon-delete">删除</el-button>
          <el-button size="mini" type="warning" v-if="scope.row.status===2" @click="updateStatus(scope.row,1)" icon="el-icon-open">启用</el-button>
          <el-button size="mini" type="danger" v-if="scope.row.status===1" @click="updateStatus(scope.row,2)" icon="el-icon-close">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新闻管理"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="新闻标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="新闻封面">
          <lz-upload limit="1" :img-src="form.cover" @uploadImage="uploadImage"></lz-upload>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="新闻类型">
          <el-select style="width: 100%;" clearable v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in messageType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="Number(item.dictValue)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新闻内容">
<!--          <el-input type="textarea" :rows="5"></el-input>-->
          <editor  v-model="form.body"></editor>
        </el-form-item>

      </el-form>
      <span slot="footer" v-if="!isView" class="dialog-footer">
        <el-button  @click="cancel">取消</el-button>
        <el-button type="primary" v-if="!isEdit" @click="submitMessage">确定</el-button>
        <el-button type="primary" v-else @click="updateMessage">立即修改</el-button>
      </span>
      <span slot="footer" v-else class="dialog-footer">
        <el-button  @click="cancel">关闭</el-button>
      </span>
    </el-dialog>



    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>

  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";

import {
  deleteMessage,
  deleteNews,
  getDict,
  getMessageList,
  getNewsList,
  insertMessage, insertNews,
  updateMessage, updateNews
} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      form: {

      },
      isView:false,
      queryParams:{
        pageNum:1,
        pageSize:10,
        title:""
      },
      dialogVisible: false,
      isEdit: false,
      content:"",
      tableData: [],
      messageType:[],
      options: [
        {value: 0, label: '全部'},
        {value: 1, label: '禁用'},
        {value: 2, label: '启用'},
      ],
    }
  },
  created() {
    this.getDictList('news_type')
  },
  mounted() {
    this.getLists(this.queryParams)
  },

  methods: {
    getDictList(item){
      getDict(item).then(res=>{
        this.messageType = res
      })
    },
    uploadImage(e){
      this.form.cover = e
    },
    parseTime,
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        title:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    getLists(params) {
      getNewsList(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },
    cancel(){
      this.form = {}
      this.dialogVisible=false
      this.getLists(this.queryParams)
    },
    deleteMessages(item){
      deleteNews(item.id).then(res=>{
        this.$message.success('删除成功')
        this.getLists(this.queryParams)
      })
    },
    submitMessage(){
      if (!this.form.title){
        this.$message.error('消息标题必填')
        return
      }
      if (!this.form.type){
        this.$message.error('选择消息类型')
        return
      }
      insertNews(this.form).then(res=>{
        this.$message.success('新增成功')
        this.cancel()
      })
    },
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    status(val) {
      let s = this.messageType.filter(value => {return Number(value.dictValue) === val})
      if (s && s.length>0){
        return s[0].dictLabel
      }else{
        return  '暂无数据'
      }
    },
    updateMessage(){
      updateNews(this.form).then(res=>{
        this.$message.success('修改成功')
        this.cancel()
      })
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.isView=false
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.isView=true
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isView=false
      this.isEdit = false
      this.form.cover = ""
    },
    updateStatus(item,status){
      if (status===1){
        updateNews({id:item.id,status:1}).then(res=>{
          this.$message.success('已启用')
          this.getLists(this.queryParams)
        })
      }else{
        updateNews({id:item.id,status:2}).then(res=>{
          this.$message.success('已禁用')
          this.getLists(this.queryParams)
        })
      }
    },
    statusType(val){
      switch (val) {
        case 1: {
          return '启用'
        }
        case 2: {
          return '禁用'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
